<template>
    <ul class="books">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page,ind) of pages" :key="ind">
            <li v-for="item of page" :key="item.id">
                <div class="book-img">
                    <img :src="item.imgUrl"/>
                </div>
                <dl>
                    <dt>{{item.bookName}}</dt>
                    <dd>{{item.author}}</dd>
                    <dd>{{item.price}}</dd>
                </dl>
            </li>     
            </swiper-slide>
        </swiper>
    </ul>
</template>
<script>
export default {
    props:['bookList'],
    data(){
        return{
            swiperOption:{
              
            },
        }
    },
    computed:{
        pages(){
            const pages=[];
            this.bookList.forEach((ele,ind)=>{
                const page = Math.floor(ind/4);
                if(!pages[page]){
                    pages[page]=[];
                }
                pages[page].push(ele);
            })
            return pages;
        }
    }
}
</script>
<style lang="stylus" scoped>
    .books
        width:100%
        height:3.5rem
        overflow:hidden
        li
            float:left
            line-height:18px
            width:25%
            height:100%
            display:flex
            flex-direction:column
            justify-content:space-around
            align-items:center
            .book-img
                overflow:hidden;
                width:80%
                display:flex
                justify-content:center
                img
                    display:block
                    height:2.35rem
            dt
                font-weight:bold
            dd:nth-of-type(1)
                color:#999
            dd:nth-of-type(2)
                color:red  
</style>